<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/web-frame/element/js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>v-for遍历数组</h2>
    <ul id="array-rendering">
        <li v-for="item in items">
            {{ item.message }}
        </li>
    </ul>
    <hr>

    <h2>v-for遍历带序号数组</h2>
    <ul id="array-with-index">
        <li v-for="(item, index) in items">
            {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
    </ul>
    <hr>

    <h2>v-for遍历对象</h2>
    <ul id="v-for-object" class="demo">
        <li v-for="value in myObject">
            {{ value }}
        </li>
    </ul>
    <hr>

    <h2>v-for遍历对象的key 和 value</h2>
    <li v-for="(value, name) in myObject">
        {{ name }}: {{ value }}
    </li>
    <hr>

    <h2>v-for遍历对象的key 和 value带序号</h2>
    <li v-for="(value, name, index) in myObject">
        {{ index }}. {{ name }}: {{ value }}
    </li>
    <hr>

    <h2>v-for遍历的过滤</h2>
    <li v-for="n in evenNumbers" :key="n">{{ n }}</li>

</div>
<script>
    var Main = {
        data() {
            return {
                parentMessage: 'Parent',
                items: [{ message: 'Foo' }, { message: 'Bar' }],
                myObject: {
                    title: 'How to do lists in Vue',
                    author: 'Jane Doe',
                    publishedAt: '2016-04-10'
                },
                numbers: [ 1, 2, 3, 4, 5 ]
            }
        },
        created(){

        },
        methods: {

        },
        computed: {
            evenNumbers() {
                return this.numbers.filter(number => number % 2 === 0)
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</body>
</html>